<template>
  <view>
    <z-paging ref="paging" v-model="state.stateList" @query="getExamineRecord">
      <van-tabs id="tabs" ref="tabsRef" :active="state.activeNum" @change="onChange">
        <van-tab v-for="(tab, index) in tabs" :key="index" :title="tab.title" :name="tab.name">
          <van-cell-group inset>
            <van-cell v-for="(item, index) in state.stateList" :key="index" :title="getValue(item)" :value="item.createDate" />
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import EquipRequest from '@/request/equipRequest';

interface IState {
  activeNum: string;
  equipId: number;
  stateList: IExamineInfo[];
}

const tabsRef = ref();

const state = reactive<IState>({
  activeNum: '1',
  equipId: 0,
  stateList: [],
});

const paging = ref();

const props = defineProps<{ equipId: number | undefined }>();

const tabs = [
  { title: '体温', name: '1' },
  { title: '心率', name: '2' },
  { title: '血氧', name: '3' },
  { title: '血压', name: '4' },
];

const getValue = (item: IExamineInfo) => {
  switch (state.activeNum) {
    case '1':
      return `${item.temp}℃`;
    case '2':
      return `${item.heart} bpm`;
    case '3':
      return `${item.oxygen} spo2`;
    case '4':
      return `${item.pressureMin} mmHg - ${item.pressureMax} mmHg`;
    default:
      return '';
  }
};

const getExamineRecord = (pageNo: number, pageSize: number) => {
  EquipRequest.GetExamineRecord({
    equipId: props.equipId,
    pageNo,
    pageSize,
    hasLoading: true,
    type: state.activeNum,
  })
    .then((res) => {
      const resD = res.data.list.map((i) => ({
        ...i,
        createDate: i.createDate, // 确保存在这个属性
      }));
      paging.value!.complete(resD);
      tabsRef.value.resize();
    })
    .catch(() => {
      paging.value!.complete(false);
    });
};

const onChange = (e: any) => {
  state.activeNum = e.detail.name;
  paging.value!.reload();
};
</script>
